<template>
  <div>
      <div class="head">
		<image :src="src1" class="headd" resize="cover" @click="back()"></image>
		<text class="head1">店主认证</text>
		<text class="head2">完成</text>
      </div>
      <text class="info">基本信息</text>
      <div class="goods_name">
      		<text class="good_name_shop">真实姓名:</text>
      		<input type="text" placeholder="请输入真实姓名" class="name_goods" />
      	</div>
      	<div class="goods_name">
      		<text class="good_name_shop">身份证号:</text>
      		<input type="text" placeholder="请输入身份证号" class="name_goods" />
      	</div>
      	<text class="info1">证件照片</text>
      	<div class="com">
      		<div class="con">
      			<image :src="src2" class="con_img"></image>
      			<image :src="src4" class="com_img"></image>
      			<image :src="src4" class="com_img1"></image>
      			<image :src="src3" class="con_img1"></image>
      		</div>
      		<div class="com_con">
      			<text class="con_text">拍摄人像页</text>
      			<text class="con_text">拍摄国徽页</text>
      		</div>	
      	</div>
      	<!-- 设置活动价格的弹窗 -->
        <div class="wrap" v-if="show012">
            <div class="wqqq" v-if="show012"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">身份证格式错误</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11" @click="sure()">确定</text>
                  <!-- <text class="duanxin11">查看</text> -->
                </div>
              </div>
            </div>
         </div>
  </div>
</template>

<style scoped>
  .head{
    	width: 100%;
    	height: 32px;
    	/*background-color: pink;*/
    	box-sizing: border-box;
    	line-height: 32px;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	margin-top: 17px;
    	position: fixed;
    	box-shadow: 1px 1px 1px #ccc;
    	position: relative;
    }
    .headd{
    	width: 15px;
    	height: 20px;
    	/*background-color: #33c179;*/
    	position: fixed;
    	left: 12px;
    }
    .head2{
    	position: absolute;
    	right: 12px;
    	margin-left: 80px;
    	font-size: 16px;
    	color: #666;
    	bottom: 3px;
    }
    .head1{
    	font-size: 20px;
    	color: #33c179;
    	font-weight: bold;
    }
    .info{
    	width: 100%;
    	height: 15px;
    	line-height: 15px;
    	color: #33c179;
    	padding-left: 12px;
    	margin-top: 26px;
    }
    .wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 99;
      opacity: .8;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 99;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
      margin-top: 10px;
    }
    .com_con{
    	width: 322px;
    	height: 14px;
    	flex-direction: row;
    	justify-content: space-between;
    	margin-top: 16px;
    }
    .com_img{
    	position: absolute;
    	bottom: 10px;
    	right: 10px;
    	width: 15px;
    	height: 13px;
    	z-index: 2;
    }
    .com_img1{
    	position: absolute;
    	left: 112px;
    	bottom: 10px;
    	width: 15px;
    	height: 13px;
    	z-index: 2;
    }
    .info1{
    	width: 100%;
    	height: 15px;
    	line-height: 15px;
    	color: #33c179;
    	padding-left: 12px;
    	margin-top: 51px;
    }
    .goods_name{
    	width: 100%;
    	height: 14px;
    	padding-left: 12px;
    	flex-direction: row;
    	margin-top: 30px;
    	box-sizing: border-box;
    	border: none;
    }
    .good_name_shop{
    	line-height: 14px;
    	height: 14px;
    	border: none;
    	font-size: 14px;
    	color: #333;
    }
    .name_goods{
    	margin-left: 22px;
    	height: 14px;
    	border: none;
    	line-height: 14px;
    	font-size: 14px;
    }
    .com{
    	width: 322px;
    	height: 131px;
    	/*background-color: pink;*/
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 41px;
    }
    .con{
    	width: 322px;
    	height: 99px;
    	flex-direction: row;
    	justify-content: space-between;
    	position: relative;
    }
    .con_img{
    	width: 134px;
    	height: 99px;
    	border-radius: 5px;
    }
    .con_img1{
    	width: 134px;
    	height: 99px;
    	border-radius: 5px;
    }
    .con_text{
    	width: 134px;
    	height: 14px;
    	line-height: 14px;
    	font-size: 14px;
    	color: #333;
    	text-align: center;
    	font-weight: bold;
    	/*margin-top: 16px;*/
    }
</style>
<script>
  export default {
    data () {
        return {
            src1: 'http://192.168.2.123:8080/img/index_back.png',//返回
            src2: 'http://192.168.2.123:8080/img/Portraitofaportrait.png',
            src3: 'http://192.168.2.123:8080/img/Filmingthenationalemblem.png',
            src4: 'http://192.168.2.123:8080/img/Shopkeepercertification_photo.png',
            show012: true,
        }
    },
    components: {
       
    },
    created () {
        
    },
    methods: {
      back(){
        this.$router.back(-1);
      },
      sure(){
      	this.show012 = false;
      }
    }
}
</script>